<template>
  <div>
    <warning-bar title="注：右上角头像下拉可切换角色" />
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button size="mini" type="primary" icon="plus" @click="addUser"
          >新增用户</el-button
        >
      </div>
      <el-table :data="tableData">
        <el-table-column align="left" label="头像" min-width="50">
          <template #default="scope">
            <CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="UUID"
          min-width="250"
          prop="uuid"
        />
        <el-table-column
          align="left"
          label="用户名"
          min-width="150"
          prop="userName"
        />
        <el-table-column
          align="left"
          label="昵称"
          min-width="100"
          prop="nickName"
        >
          <template #default="scope">
            <p v-if="!scope.row.editFlag" class="nickName">
              {{ scope.row.nickName }}
              <el-icon
                class="pointer"
                color="#66b1ff"
                @click="openEidt(scope.row)"
              >
                <edit />
              </el-icon>
            </p>
            <p v-if="scope.row.editFlag" class="nickName">
              <el-input v-model="scope.row.nickName" />
              <el-icon
                class="pointer"
                color="#67c23a"
                @click="enterEdit(scope.row)"
              >
                <check />
              </el-icon>
              <el-icon
                class="pointer"
                color="#f23c3c"
                @click="closeEdit(scope.row)"
              >
                <close />
              </el-icon>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="left" label="用户角色" min-width="150">
          <template #default="scope">
            <el-cascader
              v-model="scope.row.authorityIds"
              :options="authOptions"
              :show-all-levels="false"
              collapse-tags
              :props="{
                multiple: true,
                checkStrictly: true,
                label: 'authorityName',
                value: 'authorityId',
                disabled: 'disabled',
                emitPath: false
              }"
              :clearable="false"
              @visible-change="
                (flag) => {
                  changeAuthority(scope.row, flag)
                }
              "
              @remove-tag="
                () => {
                  changeAuthority(scope.row, false)
                }
              "
            />
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" min-width="150">
          <template #default="scope">
            <el-popover
              v-model:visible="scope.row.visible"
              placement="top"
              width="160"
            >
              <p>确定要删除此用户吗</p>
              <div style="text-align: right; margin-top: 8px">
                <el-button
                  size="mini"
                  type="text"
                  @click="scope.row.visible = false"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteUserFunc(scope.row)"
                  >确定</el-button
                >
              </div>
              <template #reference>
                <el-button type="text" icon="delete" size="mini"
                  >删除</el-button
                >
              </template>
            </el-popover>
            <el-button
              type="text"
              icon="magic-stick"
              size="mini"
              @click="resetPasswordFunc(scope.row)"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="addUserDialog"
      custom-class="user-dialog"
      title="新增用户"
    >
      <el-form
        ref="userForm"
        :rules="rules"
        :model="userInfo"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password" />
        </el-form-item>
        <el-form-item label="别名" prop="nickName">
          <el-input v-model="userInfo.nickName" />
        </el-form-item>
        <el-form-item label="用户角色" prop="authorityId">
          <el-cascader
            v-model="userInfo.authorityIds"
            style="width: 100%"
            :options="authOptions"
            :show-all-levels="false"
            :props="{
              multiple: true,
              checkStrictly: true,
              label: 'authorityName',
              value: 'authorityId',
              disabled: 'disabled',
              emitPath: false
            }"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="头像" label-width="80px">
          <div style="display: inline-block" @click="openHeaderChange">
            <img
              v-if="userInfo.headerImg"
              class="header-img-box"
              :src="
                userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http'
                  ? path + userInfo.headerImg
                  : userInfo.headerImg
              "
            />
            <div v-else class="header-img-box">从媒体库选择</div>
          </div>
        </el-form-item>

        <el-form-item label="K8S配额上限" label-width="120px">
				<el-row >
          <el-col :span="11">
            <el-form-item prop="limitCpu" >
              <el-input v-model="userInfo.limitCpu" oninput ="value=value.replace(/[^0-9.]/g,'')">
                  <template #suffix>
                    <span >
                      CPU(单位：核)
                    </span>
                  </template>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item prop="limitMemory">
              <el-input v-model="userInfo.limitMemory" oninput ="value=value.replace(/[^0-9.]/g,'')">
                  <template #suffix>
                    <span >
                      内存(单位：GB)
                    </span>
                  </template>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeAddUserDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterAddUserDialog"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <ChooseImg ref="chooseImg" :target="userInfo" :target-key="`headerImg`" />
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

<script setup>
import {
  getUserList,
  setUserAuthorities,
  register,
  deleteUser
} from '@/api/user'

import { getAuthorityList } from '@/api/authority'
import CustomPic from '@/components/customPic/index.vue'
import ChooseImg from '@/components/chooseImg/index.vue'
import warningBar from '@/components/warningBar/warningBar.vue'
import { setUserInfo, resetPassword } from '@/api/user.js'

import { nextTick, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const path = ref(import.meta.env.VITE_BASE_API)
// 初始化相关
const setAuthorityOptions = (AuthorityData, optionsData) => {
  AuthorityData &&
    AuthorityData.forEach((item) => {
      if (item.children && item.children.length) {
        const option = {
          authorityId: item.authorityId,
          authorityName: item.authorityName,
          children: []
        }
        setAuthorityOptions(item.children, option.children)
        optionsData.push(option)
      } else {
        const option = {
          authorityId: item.authorityId,
          authorityName: item.authorityName
        }
        optionsData.push(option)
      }
    })
}

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  const table = await getUserList({
    page: page.value,
    pageSize: pageSize.value
  })

  if (table.code === 0) {
    table.data.list = table.data.list.filter(
      (x) => x.authorities.findIndex((a) => a.authorityId == '888') < 0
    )
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

watch(tableData, () => {
  setAuthorityIds()
})

const initPage = async () => {
  getTableData()
  const res = await getAuthorityList({ page: 1, pageSize: 999 })
  setOptions(res.data.list.filter((x) => x.authorityId != '888'))
}

initPage()

const resetPasswordFunc = (row) => {
  ElMessageBox.confirm('是否将此用户密码重置为123456?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await resetPassword({
      ID: row.ID
    })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: res.msg
      })
    } else {
      ElMessage({
        type: 'error',
        message: res.msg
      })
    }
  })
}
const setAuthorityIds = () => {
  tableData.value &&
    tableData.value.forEach((user) => {
      const authorityIds =
        user.authorities &&
        user.authorities.map((i) => {
          return i.authorityId
        })
      user.authorityIds = authorityIds
    })
}

const chooseImg = ref(null)
const openHeaderChange = () => {
  chooseImg.value.open()
}

const authOptions = ref([])
const setOptions = (authData) => {
  authOptions.value = []
  setAuthorityOptions(authData, authOptions.value)
}

const backNickName = ref('')
const openEidt = (row) => {
  if (tableData.value.some((item) => item.editFlag)) {
    ElMessage('当前存在正在编辑的用户')
    return
  }
  backNickName.value = row.nickName
  row.editFlag = true
}

const enterEdit = async (row) => {
  const res = await setUserInfo({ nickName: row.nickName, ID: row.ID })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '设置成功'
    })
  }
  backNickName.value = ref('')
  row.editFlag = false
}

const closeEdit = (row) => {
  row.nickName = backNickName.value
  backNickName.value = ''
  row.editFlag = false
}

const deleteUserFunc = async (row) => {
  const res = await deleteUser({ id: row.ID })
  if (res.code === 0) {
    ElMessage.success('删除成功')
    await getTableData()
    row.visible = false
  }
}

// 弹窗相关
const userInfo = ref({
  username: '',
  password: '',
  nickName: '',
  headerImg: '',
  limitCpu: '',
  limitMemory: '',
  authorityId: '',
  authorityIds: []
})

const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, message: '最低5位字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { min: 6, message: '最低6位字符', trigger: 'blur' }
  ],
  nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
  authorityId: [{ required: true, message: '请选择用户角色', trigger: 'blur' }],
  limitCpu: [{ pattern: "[0-9.]", message: '必须为数字', trigger: 'blur' }],
  limitMemory: [{ pattern: "[0-9.]", message: '必须为数字', trigger: 'blur' }],
})
const userForm = ref(null)
const enterAddUserDialog = async () => {
  userInfo.value.authorityId = userInfo.value.authorityIds[0]
  userForm.value.validate(async (valid) => {
    if (valid) {
      const res = await register(userInfo.value)
      if (res.code === 0) {
        ElMessage({ type: 'success', message: '创建成功' })
      }
      await getTableData()
      closeAddUserDialog()
    }
  })
}

const addUserDialog = ref(false)
const closeAddUserDialog = () => {
  userForm.value.resetFields()
  userInfo.value.headerImg = ''
  userInfo.value.limitCpu = 0
  userInfo.value.limitMemory = 0
  userInfo.value.authorityIds = []
  addUserDialog.value = false
}
const addUser = () => {
  addUserDialog.value = true
}
const changeAuthority = async (row, flag) => {
  if (flag) {
    return
  }

  await nextTick()
  const res = await setUserAuthorities({
    ID: row.ID,
    authorityIds: row.authorityIds
  })
  if (res.code === 0) {
    ElMessage({ type: 'success', message: '角色设置成功' })
  }
}
</script>

<style lang="scss">
.user-dialog {
  .header-img-box {
    width: 200px;
    height: 200px;
    border: 1px dashed #ccc;
    border-radius: 20px;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.nickName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pointer {
  cursor: pointer;
  font-size: 16px;
  margin-left: 2px;
}
</style>
